<template>
  <div class="container">
      <h2>学号姓名</h2>
       <!-- 留言列表 -->
                <div class="py-5">
                    <h2 class="pt-2 pb-3 title">
                        <div class="line"></div>
                        <span> 留言列表 </span>
                    </h2>

                    <div class="d-flex text-muted mb-3">
                        <div class=" border-bottom col-md-12">
                            <img src="./assets/img/female.png" alt="" width="24" height="24">
                            <strong class="text-gray-dark">李小萌</strong>
                            <p>绝少有地方能像福州的三坊七巷一样，随便一脚踏下去，你的脚印就必然和某一位风云人物的足迹重合。</p>
                        </div>
                    </div>
                    <div class="d-flex text-muted mb-3">
                        <div class=" border-bottom col-md-12">
                            <img src="./assets/img/male.png" alt="" width="24" height="24">
                            <strong class="text-gray-dark">王小跳</strong>
                            <p>武夷山不仅是5A级景区，更是有着浓郁的地方文化,这里的茶文化令人着迷。</p>
                        </div>
                    </div>
                    <div class="d-flex text-muted mb-3">
                        <div class=" border-bottom col-md-12">
                            <img src="./assets/img/male.png" alt="" width="24" height="24">
                             <strong class="text-gray-dark" v-if="!message.unnamed">{{message.username}}</strong>
                             <strong class="text-gray-dark" v-else>匿名用户</strong>
                            <p>鼓浪屿岛上海礁嶙峋，岸线迤逦，山峦叠翠，峰岩跌宕。</p>
                        </div>
                    </div>
                </div>

                <!-- 发表留言 -->
                <div class="col-md-12">
                    <h2 class="pt-2 pb-3 title">
                        <div class="line"></div>
                        <span> 发表留言 </span>
                    </h2>
                    <form class="needs-validation">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="name" class="form-label">姓名:</label>
                                <input type="text" 
                                v-model="message.username"
                                class="form-control"
                                 id="name"
                                 placeholder="您的姓名"
                                
                                 required>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label">邮箱:</label>
                                <input type="email" class="form-control" id="email" placeholder="name@email.com"
                                  v-model="message.email"  required>
                            </div>

                            <div class="col-12">
                                <div>
                                    <p class="form-label">性别:</p>
                                    <div class="form-check">
                                        <input id="male" name="gender" type="radio" value="1" v-model="message.sex" class="form-check-input" required>
                                        <label class="form-check-label" for="male">男</label>
                                    </div>
                                    <div class="form-check">
                                        <input id="female" name="gender" type="radio" value="0" v-model="message.sex" class="form-check-input">
                                        <label class="form-check-label" for="female">女</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 py-2">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="unnamed-switch" v-model="message.unnamed">
                                    <label for="unnamed-switch">匿名评论</label>
                                </div>
                            </div>

                            <div class="col-12 py-2">
                                <input
                                    class="list-group-item list-group-item-action list-group-item-success form-control"
                                    placeholder="姓名,男性,name@email.com" v-model="result">
                            </div>

                            <div class="col-12">
                                <label class="form-label">留言内容:</label>
                                <textarea class="form-control" name="" id="" cols="30" rows="5"
                                    placeholder="请输入您要发表的内容">
                                </textarea>
                            </div>

                            <div class="col-12 py-2">
                                <p class="list-group-item list-group-item-action list-group-item-warning">
                                    输入内容不少于20个字符
                                </p>
                            </div>
                        </div>
                        <hr class="my-4">
                        <button class="w-100 btn btn-success btn-lg" type="submit">提交</button>
                    </form>
                </div>

  </div>
</template>

<script>
import './assets/css/bootstrap.css'
export default {
    name:'Mycom2',
    data(){
        return{
            message:{
                username:'admin',
                email:'',
                sex:1,
                // flag:false,
                unnamed:false
            }
        }
    },
    computed:{
        // result(){
        //     let sex = this.message.sex==1?'男':'女'
        //     return this.message.username+','+sex+','+this.message.email
        // }
        getName(){
            
        },
        result:{
            get(){
                let username = this.message.unnamed?'匿名':this.message.username
                let sex = this.message.sex==1?'男':'女'
                return username+','+sex+','+this.message.email
            },
            set(vlaue){

            }
        }
    }
}
</script>

<style>

</style>